<template>
	<div class="timeInfo">
		 <HeaderComp title="套餐到期时间详情" />
		 <p class="explain">注:套餐到期后将按照最近购买套餐自动续费,请保证流量余额充足</p>
		 <div class="subject">
			 <div class="subjectItem" v-for="(item,index) in demoArr" :key="index">
				 <div class="subjectItem-top">
					 <span class="subjectItem-top-name">{{item.pkgInfo}}</span>
					  <div 
							v-if="item.pkgType != 2" 
							:class="'pkgType pkg_'+item.pkgType">
							{{ pkgObj['pkg_'+item.pkgType]['typeName'] }}
						</div>
					   <div class="pkgType superposition" v-else>叠加</div>
					   <div  :class="item.pkgUseType === '0'?  'subjectItem-top-use' :'subjectItem-top-useS'">{{item.pkgUseType === '0'? '使用中':'未生效'}}</div>
					<!-- <div class="subjectItem-top-use" v-if="index == 0 || item.pkgType === '2'">使用中</div>
					 <div class="subjectItem-top-useS" v-else>未生效</div> -->
				 </div>
				 <div class="subjectItem-bottom">到期时间:{{item.pkgEndTime}}</div>
			 </div>
			 
		 </div>
		 
		 <div style="height:30px;"></div>
		 
		<div class="btnList">
		 	<van-button type="primary" class="submitBtn" @click="ToBuy">购买套餐</van-button>
		 </div>
		 <van-loading size="24px" vertical v-show="pageLoading">加载中...</van-loading>
	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
	 mercPkgEndInfo
	} from "@/api/flow/index";
	export default{
		data(){
			return{
				// 套餐类型 0：月套餐；1：年套餐；2：交互套餐；3：季套餐；4：半年套餐
				pkgObj:{
					'pkg_0': { typeName: '月'  },
					'pkg_1': { typeName: '年'  },
					'pkg_3': { typeName: '季'  },
					'pkg_4': { typeName: '半年'  },
				},
				demoArr:[],
				pageLoading:false,
			}
		},
		computed: {
			...mapGetters(['flowQueryData'])
		},
		mounted() {
			this.getMercPkgEndInfo()
		},
		methods:{
			//请求数据列表
			getMercPkgEndInfo(){
				this.pageLoading = true
				const {
					merchantId
				} = this.flowQueryData
				mercPkgEndInfo({merchantId}).then(res=>{
					this.pageLoading = false
					console.log('请求数据列表',res)
					if(res.status == 200){
						this.demoArr = res.data.data
						
					}
				})
			},
			//购买套餐
			ToBuy(){
				this.$router.push({
				  path:'/upgrade',
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.timeInfo{
		//position: relative;
		.explain{
			font-size: 26px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #131313;
			opacity: 0.8;
			padding: 40px 0 0 36px;
		}
		.subject{
			margin-top: 52px;
			//position: relative;
			padding: 0 0 0 36px;
			// z-index:2;
			.subjectItem{
				margin-bottom: 67px;
				.subjectItem-top{
					margin-bottom: 24px;
					display: flex;
					align-items: center;
					.subjectItem-top-name{
						font-size: 32px;
						font-family: PingFang SC;
						font-weight: 500;
						color: #131313;
					}
					.pkgType{
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						border-radius: 17px;
						min-width: 50px;
						height: 34px;
						margin-left: 15px;
						font-size: 24px;
						padding: 0 10px;
						&.pkg_0{
							border: 1px solid #FF742F ;
							background-color: #FF742F;
						}
						&.pkg_1{
							border: 1px solid #3498FF ;
							background-color: #3498FF;
						}
						&.pkg_3{
							border: 1px solid #FFB72F ;
							background-color: #FFB72F;
						}
						&.pkg_4{
							border: 1px solid #3498FF ;
							background-color: #3498FF;
						}
						&.superposition{
							border: 1px solid #D27BDC ;
							background-color: #D27BDC;
						}
					}
					.subjectItem-top-use{
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1px solid #87CE5C ;
						color: #fff;
						background-color: #87CE5C;
						border-radius: 17px;
						width: 100px;
						height: 34px;
						margin-left: 15px;
						font-size: 24px;
					}
					.subjectItem-top-useS{
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1px solid #D6D6D6 ;
						color: #fff;
						background-color: #D6D6D6;
						border-radius: 17px;
						width: 100px;
						height: 34px;
						margin-left: 15px;
						font-size: 24px;
					}
				}
				.subjectItem-bottom{
					font-size: 28px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #131313;
					opacity: 0.8;
				}
			}
		}
		.footer{
		  position: fixed;
		  bottom:0;
		  width: 100%;
		  line-height: var(--footer-height);
		  background: #FFB72F;
		  color: #fff;
		  height: 98px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  font-size: 32px;
		}
		
		.btnList {
			// position: absolute;
			// bottom: 0;
			// left: 0;
			position: fixed; 
			bottom: 0px;
			width: 100%;
		    //z-index:1;
			.submitBtn {
				background: #FFB72F;
				border-color: #FFB72F;
				height: 98px;
				width: 100%;
				font-size: 32px;
				margin-top: 40px;
			}
		}
	}
</style>